<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>点聚合</title>

	<style>
		html,
		body,
		.map {
			height: 96%;
			width: 98%;
			margin: 0 auto;
			overflow: hidden;
		}

		#container {
			width: 100%;
			height: calc(100% + 21px);
		}

		ul {
			list-style: none;
			display: flex;
			padding-left: 5px;
		}

		li {
			background-color: cadetblue;
			color: white;
			width: 80px;
			height: 30px;
			text-align: center;
			line-height: 30px;
		}
	</style>
</head>

<body>
	<div class="equipment">

		<select onchange="doType(this)">
			<option value="-1">全部</option>
			<option value="0">打卡</option>
			<option value="1">人脸识别</option>
			<option value="2">人脸识别测温</option>
			<option value="3">闸机</option>
			<option value="4">校车</option>
		</select>

		<input type="checkbox" onchange="doOnline(this)">只显示在线设备

	</div>

	<div class="map">
		<div id="container" class="map" tabindex="0"></div>
	</div>

	<script
		src="https://webapi.amap.com/maps?v=1.4.15&key=1362b69fe1d62d55420dd5617bbf43ec&plugin=AMap.MarkerClusterer"></script>
	<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/js/map.js"></script>
	<script>

		var data = [], type = -1, online = false;

		function change() {
			var list = data;
			if (type != -1) list = list.filter(function (it) {
				return it.type == type;
			});


			if (online) list = list.filter(function (it) {
				return it.online;
			});

			list = list.map(function (it) {
				return [it.lng, it.lat];
			});

			draw(list);
		}

		axios.get('/pc/device/location').then(function (res) {
			data = res.data;
			change();
		});


		function doType(_this) {
			type = _this.value;
			change();
		}

		function doOnline(_this) {
			online = _this.checked;
			change();
		}


	</script>
</body>

</html>